<template>
  <div>
    <div>
      <el-row style="position: relative;">
        <slide-show :SlideShowList="SlideShowList" :urls="'product_specs_img1'" style="height: 600px;"> </slide-show>
        <Product_DetailsVue :product_id="product_id" :specs="specs" @add="add" @buy="buy"
          style="position: absolute; top: 34px; right: 130px; z-index: 1111;">
        </Product_DetailsVue>
      </el-row>
    </div>
    <!--  -->
    <div class="MallProdutc">
      <el-tabs v-model="activeName">
        <el-tab-pane label="宝贝详情" name="first" class="first">
          <BabyDetailsVue :explain="explain"></BabyDetailsVue>
        </el-tab-pane>
        <el-tab-pane label="宝贝评价" name="second">
          <pin :product_id="product_id"></pin>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 产生订单-->
    <el-dialog title="订单信息" :visible.sync="orderFormVisible">
      <el-form :model="order" :inline="true" class="order_form" ref="order">
        <el-form-item label="商品名称：" style="width: 45%;">
          <span>{{ specs.product_name }}</span>
          <!-- <el-input v-model="" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="商品规格： " style="width: 45%; color: red;">
          <span>{{ order.product_specs.SpecsSize + order.product_specs.defaulteat }}</span>
        </el-form-item>
        <el-form-item label="购买数量:" style="width: 45%;">
          <span>{{ order.pay_amount }}</span>
          <!-- <el-input v-model="order.pay_amount" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="支付金额：" style="width: 45%;">
          <span style="color: red;">{{ order.pay_price }}</span>元
          <!-- <el-input v-model="order.pay_price" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="收货人：" style="width: 45%;">
          <el-input :value="user.user_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系方式:" style="width: 45%;">
          <el-input :value="user.telephone" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付方式:" style="width: 100%;">
          <ul class="sizelist">
            <li v-for="(size, index) in sizelist" :class="{ 'default': activeSize === index }" :key="index">
              <a @click="SpecsSize(index, (size))">{{ size }}</a>
            </li>
          </ul>
        </el-form-item>

        <el-form-item label="收货地址" prop="user_address" style="position: relative">
          <el-input v-model="order.user_address"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="createOrder('order')" style="margin-right: 20px;">付 款</el-button>
        <el-button @click="orderFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { showProductAll, showuser, addShoppingCart, AddOrder } from '@/api/index'
import SlideShow from '@/components/index/SlideShows.vue';
import Product_DetailsVue from '@/components/index/Product_Details.vue';
import pin from '@/components/index/pin.vue'
import BabyDetailsVue from '@/components/index/BabyDetails.vue'
export default {
  name: 'KodaiMallProduct',
  data () {
    return {
      orderFormVisible: false,
      setVisible: false,
      activeName: 'first',
      specs: {},  //商品规格，
      explain: [], //商品说明
      product_id: this.$route.query.product_id,  //商品编号
      SlideShowList: [], //轮播图
      shoppingCart: { product_id: this.$route.query.product_id, pay_amount: '1', product_specs: '' }, //购物车，
      addressForm: {
        selectedOptions: [],
        detailAddress: ''     //详细地址
      },
      order: { //订单
        order_no: 'O' + this.$getDateNow(),
        product_no: 'P' + this.$route.query.product_id,
        pay_price: '',
        product_specs: '',
        pay_amount: 1,
        pay_type: '微信',
        user_address: '',
      },
      user: {
        user_name: '',
        telephone: '111'
      },
      sizelist: ['微信', '支付宝', '货到付现金', '货到POS', '银行卡'],
      activeSize: 0
    };
  },
  mounted () {
    showProductAll(this.$route.query.product_id).then(res => {
      if (res.data.data[0][0]) {
        this.specs = res.data.data[0][0];
        this.SlideShowList = [this.specs.product_specs_img1, this.specs.product_specs_img2, this.specs.product_specs_img3];
      }
      if (res.data.data[1][0]) {
        this.explain = res.data.data[1][0];
      }
    }).catch(error => {
      console.log(error);
    });
  },

  methods: {
    // 点击加入购物车
    add (w) {
      this.$confirm("将商品放入到购物车中", "提示", {
        confirmButtonText: "确认",//确认按钮文字更换
        cancelButtonText: "取消",//取消按钮文字更换
        showClose: true,//是否显示右上角关闭按钮
        type: "warning",//提示类型  success/info/warning/error
      }).then(() => {
        this.shoppingCart.product_specs = w;
        var loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" })
        addShoppingCart(this.shoppingCart).then(res => {
          loading.close();
          if (res.data.code === 200) {
            this.showMessage.call(this, 'success', '加入购物车成功!');
          } else {
            this.showMessage.call(this, 'error', '加入购物车失败!' + res.data.msg);
          }
        })
      }).catch(() => {
        this.showMessage.call(this, 'error', '加入购物车失败!');
      });
    },
    buy (w, price) {
      this.$confirm('检测到您未绑定手机号，快递小哥哥将无法找到您', '提示', {
        confirmButtonText: '现在绑定',
        cancelButtonText: '临时填写',
        type: 'warning'
      }).then(() => { this.$router.push('/personalCenter') }).catch(() => {
        showuser().then(res => {
          if (res.data.code === 200) {
            const list = res.data.data.filter(item => {
              return item.user_id = JSON.parse(window.localStorage.getItem('stoken')).user_id
            })
            if (list[0].telephone == null) {
              this.showMessage.call(this, 'error', '手机号为空!');
              this.$router.push('/personalCenter')
            } else {
              this.user = list[0]
              this.order.product_specs = w
              this.order.pay_price = price
              this.orderFormVisible = true;
            }
          }
        })
      });
    },
    // 生成订单
    createOrder (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loading = this.$loading({ lock: true, text: "订单提交中", background: "rgba(255,255,255,0.1)" });
          this.order.product_specs = `${JSON.stringify(this.order.product_specs)}`
          AddOrder(this.order).then(res => {
            loading.close();
            if (res.data.code === 200) {
              this.showMessage.call(this, 'success', '成功生成订单!');
              this.orderFormVisible = false;
              this.setVisible = true
            } else {
              this.showMessage.call(this, 'error', '提交订单失败!' + res.data.msg);
            }
          }).catch((err) => { loading.close(); this.showMessage.call(this, 'error', '提交订单失败!' + err); })
        }
      })
    },
    SpecsSize (index, size) {
      this.activeSize = index
      this.order.pay_type = size
    },
  },
  components: {
    SlideShow,
    Product_DetailsVue,
    pin, BabyDetailsVue
  }
};
</script>

<style lang="scss" scoped>
.sizelist {
  display: block;
  width: 100%;
  padding: 2%;
}

li.default {
  border: 1px solid #3C2314;
  background: url('@/assets/selected.png') bottom right no-repeat;
}

.sizelist li {
  display: inline-block;
  border: 1px solid #C8B49B;
  padding: 0 10px;
  min-width: 52px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.MallProdutc {
  width: 85%;
  margin: 2% auto 1%;
  background-color: rgb(255, 255, 255);
}

.el-col {
  margin: 1% 0;
}

::v-deep .el-tabs__active-bar {
  background: #3c2314 !important;
}

::v-deep .el-tabs__item {
  color: #3c2314 !important;
  font-size: 20px !important;
}
</style>